<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ubi</title>
		
		<style type="text/css">
			
			*{
				padding: 0;
				margin: 0;
			}
			
			body {
				background-color: #000000;
			}


			.title {
				background-color: #000000;
				height: 40px;
				width: 100%;
				/* position: fixed; */
				border-bottom: #999999 solid 2px;
			}

			.title div {
				float: left;
			}
			
			#help1{
				height: 50px;
			}

			.test {
				/* background-color: #FFFF11; */
				/* border: cyan solid 1px; */
				margin: 1px;
				height: 500px;
				width: 100%;
				/* overflow: hidden; */
			}

			.test div {
				float: left;
			}

			.test {
				/* background-color: #000000; */
			}

			#logo {
				width: 20%;
			}

			.rowstyle1 {
				width: 58%;
				text-align: center;
				margin: 10px;
			}

			#search {
				width: 20%;
				padding-top: 10px;
			}

			.rowstyle1 ul {
				list-style: none;
			}

			.rowstyle1 ul a {
				display: block;
				text-decoration: none;
				font-style: inherit;
				color: #FFFFFF;
			}

			.rowstyle1>ul>li {
				float: left;
				/* border: #FFFFFF solid 0px; */
				position: relative;
			}

			.rowstyle1 ul li {
				width: 140px;
				text-align: center;
				/* background-color: #BDBDBD; */
			}

			.rowstyle1 ul li:hover {
				background-color: darkgrey;
			}

			#list ul {
				position: absolute;
				left: -1000px;
			}

			#list:hover ul {
				left: 0%;
			}

			.test1 {
				/* border: blue solid 1px; */
				width: 59.6%;
				height: 100%;
				margin: 0 1px;
				padding-left: 0;
			}

			.test2 {
				border: #000000 solid 1px;
				width: 39.7%;
				height: 100%;
				margin: 0 1px;
				padding-right: 0;
			}

			#cycle {
				height: 500px;
				background-color: #000000;
			}
			
			#cycle div{
				float: left;
				border: #000000 solid 1px;
			}
			
			.drawing{
				margin: 1px;
				width: 395px;
				height: 162px;
				align-content: center;
			}
			
			.title1{
				background-color: #3E61AD;
				width: 100%;
				height: 25px;
				list-style: none;
				font-style: inherit;
				color: #FFFFFF;
			}
			
			.title1 div{
				float: left;
			}
			
			.longTitle{
				width: 70%;
			}
			
			.shortTitle{
				font-style: inherit;
				align-content: center;
				background-color: slategrey;
				height: 100%;
				width: 30%;
			}
			
			.shortTitle:hover{
				background-color: dimgrey;
			}
			
			.shortTitle a{
				text-decoration: none;
				font-style: inherit;
				color: #FFFFFF;
			}
			
			.title2{
				height: 100%;
				width: 100%;
				float: none;
				/* background-color: gold; */
			}
			
			.content1{
				height: 150px;
				width: 98%;/* 710px */
				margin: 2px 2px;
				padding-left: 7px;
				border: #696969 solid 2px;
				/* background-color: #FF3CAC; */
			}
			
			.content1 div{
				float: left;
			}
			
			.nrT{
				padding-left: 0;
				padding-right: 0;
				margin-left: -8px;
				height: 150px;
				width: 200px;
			}
			
			.nrZ{
				padding: 10px;
			}
			
			.nrZ a{
				text-decoration: none;
				font-style: inherit;
				color: #FFFFFF;
			}
			
			.nrZ div{
				margin: 2px;
				float: none;
			}
			
			.news-date{
				color: #565656;
				font-weight: bold;
				font-size: x-small;
			}
			
			.news-content{
				font-size: smaller;
				height: 100%;
			}
			
			p{
				margin: 0;
				padding: 0;
				word-break: break-all;
			}
			
			.box {
				/* width: 2000px;
				height: 300px; */
				/* border: 1px solid #ccc;
				margin: 100px auto;
				padding: 5px; */
				margin: 5px 0;
			}
			
			.inner {
				width: 100%;
				height: 100%;
				position: relative;
				overflow: hidden;
				
			}
			
			.inner img {
				width: 1200px;
				height: 500px;
				vertical-align: top
			}
			
			.inner ul {
				width: 1000%;
				position: absolute;
				list-style: none;
				left: 20px;
				top: 0;
				
			}
			
			.inner li {
				float: left;
			
			}
			
			.inner ol {
				position: absolute;
				height: 20px;
				right: 20px;
				bottom: 20px;
				text-align: center;
				padding: 5px;
			}
			
			.inner ol li {
				display: inline-block;
				width: 20px;
				height: 20px;
				line-height: 20px;
				background-color: #fff;
				margin: 5px;
				cursor: pointer;
			
			}
			
			.inner ol .current {
				background-color: red;
			}
			
			#arr {
				display: none;
			}
			
			#arr span {
				width: 40px;
				height: 40px;
				position: absolute;
				left: 5px;
				top: 50%;
				margin-top: -20px;
				background: #fff;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				font-weight: bold;
				font-family: '黑体';
				font-size: 30px;
				color: #000;
				opacity: 0.5;
				border: 1px solid #fff;
			}
			
			#arr #right {
				right: 5px;
				left: auto;
			}
			
			
			
		</style>

	</head>

	<body>
		<div id="title1" class="title">
			<div id="logo">
				<img src="imgs/logo.jpg" />
			</div>
			<div class="rowstyle1">
				<ul>
					<li>
						<a href="111222333.html">首页</a>
					</li>
					<li id="list">
						<a href="https://www.ubisoft.com.cn/games/fcb">游戏</a>
						<ul>
							<li><a href="https://www.ubisoft.com.cn/games/fcb">主机游戏</a></li>
							<li><a href="https://www.ubisoft.com.cn/games/acod">PC游戏</a></li>
							<li><a href="https://www.ubisoft.com.cn/games/acre">移动游戏</a></li>
							<li><a href="https://www.ubisoft.com.cn/games/spacejunkies">VR游戏</a></li>
						</ul>
					</li>
					<li>
						<a href="https://store.ubi.com/cn/home">STORE商城</a>
					</li>
					<li>
						<a href="https://www.ubisoft.com.cn/home/support">支持</a>
					</li>
				</ul>
			</div>
			<div id="search">
				<a href="dl.html">
				<input type="button" value="登录" />
				</a>
				<input type="text" value="输入关键字" />
				<input type="button" value="搜索" />
			</div>
		</div>
		
		<div id="help1"></div><!-- 只单纯为了好看 -->
		
		<div id="cycle" class="test">
			<div class="box" id="box" style="width: 1200px; height: 500px;">
				<div class="inner">
					<!--轮播图-->
					<ul>
						<li><a href="#"><img src="imgs/img1.png" alt=""></a></li>
						<li><a href="#"><img src="imgs/img2.png" alt=""></a></li>
						<li><a href="#"><img src="imgs/img3.png" alt=""></a></li>
						<li><a href="#"><img src="imgs/img4.png" alt=""></a></li>
						<li><a href="#"><img src="imgs/img5.png" alt=""></a></li>
						<li><a href="#"><img src="imgs/img6.png" alt=""></a></li>
						<li><a href="#"><img src="imgs/img7.png" alt=""></a></li>
						<li><a href="#"><img src="imgs/img8.png" alt=""></a></li>
						<li><a href="#"><img src="imgs/img9.png" alt=""></a></li>
			
					</ul>
			
					<ol class="bar">
			
					</ol>
					<!--左右焦点-->
					<div id="arr">
						<span id="left">
							< 
						</span> 
						<span id="right">
								>
						</span>
					</div>
			
				</div>
			</div>
		</div>	
			
			<!-- <div id="cycle" class="test">
				<div class="drawing">
					<img src="imgs/img1.png" width="350px" height="150px" alt="">
				</div>
				<div class="drawing">
					<img src="imgs/img2.png" width="350px" height="150px" alt="">
				</div>
				<div class="drawing">
					<img src="imgs/img3.png" width="350px" height="150px" alt="">
				</div>
				<div class="drawing">
					<img src="imgs/img4.png" width="350px" height="150px" alt="">
				</div>
				<div class="drawing">
					<img src="imgs/img5.png" width="350px" height="150px" alt="">
				</div>
				<div class="drawing">
					<img src="imgs/img6.png" width="350px" height="150px" alt="">
				</div>
				<div class="drawing">
					<img src="imgs/img7.png" width="350px" height="150px" alt="">
				</div>
				<div class="drawing">
					<img src="imgs/img8.png" width="350px" height="150px" alt="">
				</div>
				<div class="drawing">
					<img src="imgs/img9.png" width="350px" height="150px" alt="">
				</div> 
			</div> -->
			

		<div id="div1" class="test">
			<!-- <img src="imgs/timg.jpg" /> -->
			<div class="test1">
				<div id="" class="title1">
					<div id="" class="longTitle">&nbsp;&nbsp;育碧游戏新闻</div>
					<div id="" class="shortTitle">
						<a href="#">
							<div>&nbsp;&nbsp;&nbsp;&nbsp;更多..&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
						</a>
					</div>
				</div>
				<div id="" class="title2">
					<div class="content1">
						<div id="nr1" class="nrT">
							<a href="#">
								<img src="imgs/img10.jpg" height="100%" width="100%"/>
							</a>
						</div>	
						<div id="nr2" class="nrZ" style="height: 100%; color: #FFFFFF; font-size: small; ">
							<a href="#">
								<h5>热舞庆寒假！《舞力全开2019》全新主题更新今日推出</h3>
							</a>
							<div class="news-date">2018/9/11</div>
							<p>
								我我哦我欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文
							</p>
							
							<!-- <div class="news-content">
								ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
							</div> -->
						</div>
					</div>
					<div class="content1">
						<div id="nr1" class="nrT">
							<a href="#">
								<img src="imgs/img10.jpg" height="100%" width="100%"/>
							</a>
						</div>	
						<div id="nr2" class="nrZ" style="height: 100%;  color: #FFFFFF; font-size: small; ">
							<a href="#">
								<h5>热舞庆寒假！《舞力全开2019》全新主题更新今日推出</h3>
							</a>
							<div class="news-date">2018/9/11</div>
							<p>
								我我哦我欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文
							</p>
							
							<!-- <div class="news-content">
								ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
							</div> -->
						</div>
					</div>
					<div class="content1">
						<div id="nr1" class="nrT">
							<a href="#">
								<img src="imgs/img10.jpg" height="100%" width="100%"/>
							</a>
						</div>	
						<div id="nr2" class="nrZ" style="height: 100%;  color: #FFFFFF; font-size: small; ">
							<a href="#">
								<h5>热舞庆寒假！《舞力全开2019》全新主题更新今日推出</h3>
							</a>
							<div class="news-date">2018/9/11</div>
							<p>
								我我哦我欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文欧文
							</p>
							
							<!-- <div class="news-content">
								ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
							</div> -->
						</div>
					</div>
				</div>
				
			</div>
			<div class="test2">
				<div id="" class="" style="background-color: #7E95CB; width: 483px; height: 500px;">
					<div style="margin: 20px 20px; background-color: #FFFFFF; width: 425px; height: 440px; padding: 10px;">
						<div style="background-color: #3E61AD; width: 385px; top: 25px; margin-left: 0px; padding: 0 20px; height: 40px; color: #FFFFFF; align-content: center; ">
							<span>全球发售计划</span>
							<div id="">
								
								
							</div>
						</div>
						<div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
			</div>
		</div>

	<script>
		/**
		 *
		 * @param id  传入元素的id
		 * @returns {HTMLElement | null}  返回标签对象，方便获取元素
		 */
		function my$(id) {
			return document.getElementById(id);
		}
	
		//获取各元素，方便操作
		var box = my$("box");
		var inner = box.children[0];
		var ulObj = inner.children[0];
		var list = ulObj.children;
		var olObj = inner.children[1];
		var arr = my$("arr");
		var imgWidth = inner.offsetWidth;
		var right = my$("right");
		var pic = 0;
		//根据li个数，创建小按钮
		for (var i = 0; i < list.length; i++) {
			var liObj = document.createElement("li");
	
			olObj.appendChild(liObj);
			liObj.innerText = (i + 1);
			liObj.setAttribute("index", i);
	
			//为按钮注册mouseover事件
			liObj.onmouseover = function() {
				//先清除所有按钮的样式
	
				for (var j = 0; j < olObj.children.length; j++) {
					olObj.children[j].removeAttribute("class");
				}
				this.className = "current";
				pic = this.getAttribute("index");
				animate(ulObj, -pic * imgWidth);
			}
	
		}
	
	
		//设置ol中第一个li有背景颜色
		olObj.children[0].className = "current";
		//克隆一个ul中第一个li,加入到ul中的最后=====克隆
		ulObj.appendChild(ulObj.children[0].cloneNode(true));
	
		var timeId = setInterval(onmouseclickHandle, 3000);
		//左右焦点实现点击切换图片功能
		box.onmouseover = function() {
			arr.style.display = "block";
			clearInterval(timeId);
		};
		box.onmouseout = function() {
			arr.style.display = "none";
			timeId = setInterval(onmouseclickHandle, 3000);
		};
	
		right.onclick = onmouseclickHandle;
	
		function onmouseclickHandle() {
			//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
			//所以,如果用户再次点击按钮,用户应该看到第二个图片
			if (pic == list.length - 1) {
				//如何从第6个图,跳转到第一个图
				pic = 0; //先设置pic=0
				ulObj.style.left = 0 + "px"; //把ul的位置还原成开始的默认位置
			}
			pic++; //立刻设置pic加1,那么此时用户就会看到第二个图片了
			animate(ulObj, -pic * imgWidth); //pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
			//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
			if (pic == list.length - 1) {
				//第五个按钮颜色干掉
				olObj.children[olObj.children.length - 1].className = "";
				//第一个按钮颜色设置上
				olObj.children[0].className = "current";
			} else {
				//干掉所有的小按钮的背景颜色
				for (var i = 0; i < olObj.children.length; i++) {
					olObj.children[i].removeAttribute("class");
				}
				olObj.children[pic].className = "current";
			}
		}
		left.onclick = function() {
			if (pic == 0) {
				pic = list.length - 1;
				ulObj.style.left = -pic * imgWidth + "px";
			}
			pic--;
			animate(ulObj, -pic * imgWidth);
			for (var i = 0; i < olObj.children.length; i++) {
				olObj.children[i].removeAttribute("class");
			}
			//当前的pic索引对应的按钮设置颜色
			olObj.children[pic].className = "current";
		};
	
		//设置任意的一个元素,移动到指定的目标位置
		function animate(element, target) {
			clearInterval(element.timeId);
			//定时器的id值存储到对象的一个属性中
			element.timeId = setInterval(function() {
				//获取元素的当前的位置,数字类型
				var current = element.offsetLeft;
				//每次移动的距离
				var step = 10;
				step = current < target ? step : -step;
				//当前移动到位置
				current += step;
				if (Math.abs(current - target) > Math.abs(step)) {
					element.style.left = current + "px";
				} else {
					//清理定时器
					clearInterval(element.timeId);
					//直接到达目标
					element.style.left = target + "px";
				}
			}, 10);
		}
	</script>

		

	</body>
	<!-- <script src='js/jquery.min.js'></script>
	<script src='js/slick.min.js'></script>

	<script src="js/index.js"></script> -->
</html>
